<template>
  <el-dialog
    title="商品详情"
    :visible.sync="dialogvisible"
    width="40%"
    :before-close="shutdown"
  >
    <el-row :gutter="20">
      <el-col :span="8">编号：  {{ onegooddata.number }}</el-col>
      <el-col :span="8">所属：  {{ onegooddata.Belong }}</el-col>
      <el-col :span="8">名称：  {{ onegooddata.name }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">类型：  {{ onegooddata.type }}</el-col>
      <el-col :span="8">成本价：  {{ onegooddata.costprice }}RMB</el-col>
      <el-col :span="8">原价：  {{ onegooddata.originalprice }}RMB</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">售价： {{ onegooddata.sellingprice }}RMB</el-col>
      <el-col :span="8">库存量：  {{ onegooddata.inventory }}</el-col>
      <el-col :span="8">月销售量：  {{ onegooddata.monthlysales }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">总销售量：  {{ onegooddata.totalsales }}</el-col>
      <el-col :span="8">月销售额：  {{ onegooddata.monthlymoney }}RMB</el-col>
      <el-col :span="8">总销售额：  {{ onegooddata.totalmoney }}RMB</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">参与活动：  {{ onegooddata.activities }}</el-col>
      <el-col :span="8">热销:   <el-tag size="mini">{{ onegooddata.state | getstate }}</el-tag></el-col>
      <el-col :span="8">是否推荐:  <el-tag size="mini">{{ onegooddata.state | getstate }}</el-tag></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">状态:  <el-tag size="mini">{{ onegooddata.state | getstate }}</el-tag></el-col>
      <el-col :span="8">临保时长：  {{ onegooddata.keeptime }} 天</el-col>
    </el-row>
    <h2>商品图片</h2>
    <div class="img_box">
      <el-image
        :src="url"
        fit="cover"
      />
      <el-image
        :src="url"
        fit="cover"
      />
      <el-image
        :src="url"
        fit="cover"
      />
      <el-image
        :src="url"
        fit="cover"
      />
      <el-image
        :src="url"
        fit="cover"
      />
      <el-image
        :src="url"
        fit="cover"
      />
    </div>
    <h2>商品描述(支持富文本编辑)</h2>
    <el-input type="textarea" placeholder="请输入内容" />
    <h2>商品参与活动</h2>
    <div v-if="onegooddata.state">
      <el-row :gutter="20">
        <el-col :span="8">参与活动：  {{ onegooddata.activities }}</el-col>
        <el-col :span="8">账号限购：  {{ onegooddata.monthlysales }}件</el-col>
        <el-col :span="8">秒杀价：  {{ onegooddata.originalprice }}RMB</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">秒杀时段</el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="miaoshatime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <el-row :gutter="20">
        <el-col :span="8">参与活动：  {{ onegooddata.activities }}</el-col>
        <el-col :span="8">第一件是否优惠：  <el-tag size="mini">{{ onegooddata.state | getstate }}</el-tag></el-col>
        <el-col :span="8">促销价：  {{ onegooddata.originalprice }}RMB</el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="shutdown">取 消</el-button>
      <el-button type="primary" @click="shutdown">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogvisible: {
      type: Boolean,
    },
    onegooddata: {
      type: Object,
      default: function de() {},
    }},
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    };
  },
  methods: {
    shutdown() {
      this.$emit('shutdown');
    },
  },
};
</script>

<style lang="scss" scoped>
.img_box{
        width: 100%;
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
                 .el-image{
                     margin-left: 16px;
                     margin-bottom: 20px;
                    width: 170px!important;
                    height: 150px!important;
                }
    }
    .son_box{
        border: 1px solid #ccc;
        width: 210px;
        height: 250px;
        margin-right: 10px;
        margin-bottom: 10px;
        img{
            width: 100%;
            height: 125px;
        }
        .somall_sonbox{
            padding: 15px 15px;
            display: flex;
            flex-direction: column;
        }
    }
    .el-dialog{
        .el-row {
              margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
    }
</style>
